<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    state: { type: Number, required: true },
    num: [Number, String],
    needNum: [Number, String],
    surplusNum: [Number, String],
    text: String,
  },
});
</script>

<template>
  <view class="group-state">
    <view class="group-state-num">
      <template v-if="state === 1">
        <template v-if="surplusNum > 0">
          已成团&emsp;剩余位置<text class="group-state-num3"
            >{{ surplusNum }}人</text
          >
        </template>
        <template v-else>该拼单已满人</template>
      </template>
      <template v-else-if="state === 2">
        <template v-if="num2 > 0">
          已报名<text class="group-state-num2">{{ num }}人</text>&emsp;还差<text
            class="group-state-num3"
            >{{ needNum }}人</text
          >成团
        </template>
        <template v-else>
          已报名<text class="group-state-num2">{{ num }}人</text>
        </template>
      </template>
    </view>

    <view style="position: relative; flex-shrink: 0">
      <image
        class="group-state-bg"
        :src="
          state === 3
            ? '/package/activity/static/dypt-detail-bg3.png'
            : state === 2
            ? '/package/activity/static/dypt-detail-bg2.png'
            : '/package/activity/static/dypt-detail-bg.png'
        "
      />
      <view class="group-state-text">{{ text }}</view>
    </view>
  </view>
</template>

<style lang="scss">
.group-state {
  display: flex;
  align-items: center;
  height: 80rpx;
  padding-left: 30rpx;
  border-radius: 10rpx;
  background: linear-gradient(90deg, #fff9f9, #ffe7e7);

  .group-state-num {
    flex-grow: 1;
    min-width: 0;
    font-size: 24rpx;
    color: #333333;
  }

  .group-state-num2,
  .group-state-num3 {
    font-size: 28rpx;
    color: #1bc76f;
    font-weight: bold;
  }

  .group-state-num3 {
    color: #ff4d42;
  }

  .group-state-bg {
    display: block;
    width: 288rpx;
    height: 80rpx;
  }

  .group-state-text {
    position: absolute;
    left: 30rpx;
    top: 50%;
    right: 0;
    font-size: 24rpx;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    transform: translateY(-50%);
  }
}
</style>